<script setup>
import emptyCartSrc from '@/assets/images/empty-car.png'
import {useCartStore} from '@/stores/cart';
const cartStore = useCartStore();
//解构仓库数据，为了保留响应式，可以使用storeToRefs
const {cartItems,totalPrice,isAllChecked} = storeToRefs(cartStore);
const removeFromCart = (cartItemId)=>cartStore.removeCartList(cartItemId)
</script>
<template>
  <NavBar title="购物车"></NavBar>
  <van-empty class="empty" description="购物车空空如也" :image="emptyCartSrc" v-if="cartItems.length===0"/>
  <div class="cart-wrapper" v-else>
    <van-swipe-cell v-for="cartItem in cartItems" :key="cartItem.cartItemId">
      <div class="product">
        <van-checkbox checked-color="#1BAEAE" v-model="cartItem.checked"></van-checkbox>
        <CartItem :item="cartItem"/>
      </div>
      <template #right>
        <van-button square type="danger" 
        text="删除" @click="removeFromCart(cartItem.cartItemId)"></van-button>
      </template>
    </van-swipe-cell>
  </div>
  <van-submit-bar :price="totalPrice" button-text="结算" button-type="primary">
    <van-checkbox checked-color="#1BAEAE" v-model="isAllChecked">全选</van-checkbox>
  </van-submit-bar>
</template>
<style lang="less">
.empty{
  margin-top:100px;
}
.cart-wrapper{
  padding:50px 20px 100px 20px;
  .product{
    display: flex;
  }
}
</style>